{extend name="template/base" /}
{block name="content"}
{php}
use think\Db;
{/php}
<!--select2样式 start -->
<link href="__LIB__/select2-4.0.3/dist/css/select2.min.css" rel="stylesheet" />
<br><br><br>
<div class="page-container">
    <form class="form form-horizontal" id="form" method="post" action="{:\\think\\Request::instance()->baseUrl()}">
        <input type="hidden" name="id" value="{$vo.id ?? ''}">
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>酒店名称：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <select name="hotel_id" id="hotel_id" class="select2" datatype="*" nullmsg="酒店名称不能为空" onchange="change(this)">
                    {if empty($vo['hotel_id'])}
                    <option value="">请选择酒店</option>
                    {/if}
                    {foreach $hotel as $vo2}
                    <option {if ($vo2['id'] == $vo['hotel_id'])} selected {/if} value="{$vo2.id}">{$vo2.id}:{$vo2.hotel_name}</option>
                    {/foreach}
                </select>
              </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">酒店位置：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" placeholder="酒店位置" name="hotel_location" value="{$vo.hotel_location ?? ''}" >
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>开始时间：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text Wdate" autocomplete="off" style="width: 200px" placeholder="开始时间" name="start_time" value="{$vo.start_time ?? ''}" {literal} onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" {/literal}  datatype="*" nullmsg="开始时间不能为空" errormsg="开始时间格式错误">
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3"><span class="c-red">*</span>结束时间：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text Wdate"  autocomplete="off" style="width: 200px" placeholder="结束时间" name="end_time" value="{$vo.end_time ?? ''}" {literal} onfocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" {/literal}  datatype="*" nullmsg="结束时间不能为空" errormsg="结束时间格式错误">
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">备注：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <textarea class="textarea" placeholder="请输入备注"  name="remark" >{$vo.remark ?? ''}</textarea>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-3 col-sm-3">酒店房型：</label>
            <span id="type_data" style="display: none"></span>
            <div class="formControls col-xs-6 col-sm-6">
                <div class="hotel_room"></div>
                <button type="button" class="btn btn-primary radius" style="margin-top: 5px;margin-bottom: 2px" onclick="addRoom()">&nbsp;&nbsp;添加&nbsp;&nbsp;</button>
            </div>
            <div class="col-xs-3 col-sm-3"></div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="submit" class="btn btn-primary radius">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onClick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</div>
{/block}
{block name="script"}
<script type="text/javascript" src="__LIB__/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="__LIB__/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="__LIB__/select2-4.0.3/dist/js/select2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="__LIB__/tags-input/dist/jquery.tagsinput.js"></script>
<script type="text/javascript" charset="utf-8" src="__LIB__/tags-input/dist/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="__LIB__/tags-input/dist/jquery-ui.css" />
<script>
    var room_num = 1;
    var room_arr = new Array
    function change(e) {
        var id = $(e).val();
        console.log('hotel_id',id)
        $.ajax({
            type: 'post',
            url: '/admin/hotel/get_hotel_room_type',
            data: {id:id},
            success: function (res) {
                console.log('res',res)
                if(res.length > 0){
                    if($('.hotel_room').children().length > 0){
                        $('.hotel_room').empty()
                    }
                    room_arr = res;
                }else{
                    layer.msg('该酒店无房型信息');
                }
            }
        });
    }
    function addRoom() {
        var hotel_id = $("#hotel_id").val();
        if(hotel_id == '' || hotel_id == null || hotel_id == undefined){
            layer.msg('请先选择酒店');
            return false
        }
        if(room_arr.length > 0) {
            console.log('hotel_id', $("#hotel_id").val())
            $('.hotel_room').append("" +
                "<div id='add_room_" + room_num + "' class='add_room'>" +
                "<label><span class='c-red'>*</span>房型名称：</label>" +
                "<select id='room_name_" + room_num + "' name='room_name_" + room_num + "' class='input-text' style='width:270px;vertical-align: top;margin-bottom: 2px'  datatype='*' nullmsg='房型名称不能为空'>" +
                "<option value=''>请选择房型名称</option>" +
                "</select>" +
                "<br> " +
                "<label><span class='c-red'>*</span>房型价格：</label>" +
                "<input type='text' class='input-text'  style='width:270px;vertical-align: top;margin-right: 2px'  placeholder='房型价格' id='room_price_" + room_num + "' name='room_price_" + room_num + "' value='' datatype='*' nullmsg='房型价格不能为空' >" +
                "<input class='btn btn-danger radius' style='height: 24px;margin-top:3px;margin-left: 2px' title='删除' placeholder='删除' onclick='delRoom(add_room_" + room_num + ")' type='button' value='—'>" +
                "<br>" +
                "<label><span class='c-red'>*</span>是否包含早餐：</label>" +
                "<select id='include_breakfast_" + room_num + "' name='include_breakfast_" + room_num + "' class='input-text' style='width:270px;vertical-align: top;margin-bottom: 2px'  datatype='*' nullmsg='是否包含早餐不能为空'>" +
                "<option value='1'>是</option>" +
                "<option value='0'>否</option>" +
                "</select>" +
                "<br>" +
                "<hr>" +
                "</div>");
            var id = "#room_name_" + room_num;
            for(var j = 0;j < room_arr.length;j++){
                $(id).append('<option value="'+room_arr[j].room_type_id+'">'+room_arr[j].room_name+'</option>')
            }
            room_num = room_num +1
        }else{
            layer.msg('请酒店无房型信息');
            return false
        }
    }

    function delRoom(id) {
        id.parentNode.removeChild(id);
        console.log('remove_id',id);
    }

    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form").Validform({
            tiptype: 2,
            ajaxPost: true,
            showAllError: true,
            callback: function (ret){
                ajax_progress(ret);
            }
        });
            //用户select2 js部分 start
        var hotel_id = $("#hotel_id").select2({
            language: "zh-CN", //设置 提示语言
            width: "100%", //设置下拉框的宽度
            theme: "classic"
        });
        {notempty name = "vo['hotel_id']"}
        hotel_id.val("{$vo['hotel_id']}").trigger("change");
        {/notempty}
            //用户select2 js部分 end
    })
</script>
{/block}
